<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 多项目管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
<!--                新建项目-->
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        class="handle-del mr10"
                        @click="isAddProject=true"
                >新建项目</el-button>
                <el-dialog title="添加项目" :visible.sync="isAddProject" >
                    <el-form :model="form">
                        <el-row>
                            <el-col :span="10" >
                                <el-form-item label="项目名称">
                                    <el-input v-model="form.projectName"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10" style="margin-left: 74px">
                                <el-form-item label="项目负责人">
                                    <el-input v-model="form.projectManager"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <div class="block" style="margin-top: 14px">
                                    <span class="demonstration">项目星级</span>
                                    <el-rate v-model="form.level" style="margin-top: 6px"></el-rate>
                                </div>
                            </el-col>
                            <el-col :span="10" style="margin-left: 74px">
                                <el-form-item label="甲方">
                                    <el-input v-model="form.partyA"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row style="margin-top: 10px;margin-bottom: 10px">
                                <span class="demonstration" style="margin-right: 46px">项目起止时间</span>
                                <el-date-picker
                                        style="width: 70%"
                                        v-model="form.value6"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                        </el-row>
                        <el-row>
                            <span class="demonstration" style="margin-right: 72px;margin-top: 10px!important">项目工期</span>
                            <el-input style="width: 70%;margin-top: 10px!important" v-model="form.workTime" placeholder="人/天"></el-input>
                        </el-row>
                        <el-form-item label="项目描述">
                            <el-input type="textarea" v-model="form.description"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="isAddProject = false">取 消</el-button>
                        <el-button type="primary" @click="addproject()">确 定</el-button>
                    </div>
                </el-dialog>
<!--                批量删除-->
                <el-button
                        type="primary"
                        icon="el-icon-delete"
                        class="handle-del mr10"
                        @click="delAllSelection"
                >批量删除</el-button>

                <el-input v-model="query.name" placeholder="项目名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        class="handle-del mr10"
                        @click=""
                        style="float: right"
                >上传项目列表</el-button>
                <el-button
                        type="primary"
                        icon="el-icon-plus"
                        class="handle-del mr10"
                        @click=""
                        style="float: right"
                >下载项目列表</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="level" label="星级" width="55" align="center"></el-table-column>
                <el-table-column prop="projectId" label="项目ID" width="80" align="center"></el-table-column>
                <el-table-column prop="projectName" label="项目名称"></el-table-column>
                <el-table-column label="项目状态" prop="projectStatus" align="center">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.projectStatus === '未开始'">
                            {{scope.row.projectStatus}}
                        </el-tag>
                        <el-tag v-if="scope.row.projectStatus === '进行中'">
                            {{scope.row.projectStatus}}
                        </el-tag>
                        <el-tag type="success" v-if="scope.row.projectStatus === '已完成'">
                            {{scope.row.projectStatus}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="项目负责人" prop="projectManager" align="center"></el-table-column>
                <el-table-column label="甲方" prop="partyA" align="center"></el-table-column>
                <el-table-column label="项目工期" prop="workTime">
                    <template slot-scope="scope">{{scope.row.workTime}}人/天</template>
                </el-table-column>
                <el-table-column label="团队名称" prop="team"></el-table-column>
                <el-table-column label="项目开始日期" prop="startTime"></el-table-column>
                <el-table-column label="项目结束日期" prop="finishTime"></el-table-column>
                <el-table-column label="项目总体进度" prop="projectProgress">
                    <template slot-scope="scope">{{scope.row.projectProgress*100}}%</template>
                </el-table-column>
                 <el-table-column label="项目阶段" prop="planName"></el-table-column>
                <el-table-column label="阶段进度" prop="planProgress">
                    <template slot-scope="scope">{{scope.row.planProgress*100}}%</template>
                </el-table-column>
                <el-table-column label="迭代数" prop="iteration"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-tickets"
                                @click="gotoProjectOne(scope.row)"
                        >查看
                        </el-button>
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"

                        >编辑</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"

                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
<!--            分页显示-->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 编辑弹出框 -->
        <el-dialog title="编辑项目" :visible.sync="editVisible" >
            <el-form :model="form">
                <el-row>
                    <el-col :span="10" >
                        <el-form-item label="项目名称">
                            <el-input v-model="form.projectName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" style="margin-left: 74px">
                        <el-form-item label="项目负责人">
                            <el-input v-model="form.projectManager"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <div class="block" style="margin-top: 14px">
                            <span class="demonstration">项目星级</span>
                            <el-rate v-model="form.level1" style="margin-top: 6px"></el-rate>
                        </div>
                    </el-col>
                    <el-col :span="10" style="margin-left: 74px">
                        <el-form-item label="甲方">
                            <el-input v-model="form.partyA"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px;margin-bottom: 10px">
                    <span class="demonstration" style="margin-right: 46px">项目状态</span>
                    <el-select v-model="form.projectStatus" value-key="value" style="width: 80%" >
                        <el-option :label="item.value" v-for="(item) in projectStatusList" :key="item.value" :value="item.value" ></el-option>
                    </el-select>
                </el-row>
                <el-row style="margin-top: 10px;margin-bottom: 10px">
                    <span class="demonstration" style="margin-right: 46px">项目工期</span>
                    <el-date-picker
                            style="width: 80%"
                            v-model="form.value6"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-row>
                <el-row>
                    <span class="demonstration" style="margin-right: 72px;margin-top: 10px!important">项目工期</span>
                    <el-input style="width: 70%;margin-top: 10px!important" v-model="form.workTime" placeholder="人/天"></el-input>
                </el-row>
                <el-form-item label="项目描述">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <span style="color:#808080;font-size: 12px; float: left">请重新确认项目星级及项目工期！</span>
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

  import { fetchData } from '../../api/index';
  import {Message} from 'element-ui';
  import qs from 'qs'
  export default {
    name: 'basetable',
    data() {
      return {
        tableDataALL:[],
        projectid:'',
        projectIds1:[],
        tableData: [],
        projectStatusList : [
          {value: '未开始', id: '0' },
          {value: '进行中', id: '1' },
          {value: '已完成', id: '2' }
        ],
        isAddProject:false,
        query: {
          address: '',
          name: '',
          pageIndex: 1,
          pageSize: 10
        },
        offset:1,
        multipleSelection: [],
        delList: [],
        editVisible: false,
        pageTotal: 0,
        form: {
          finishTime:'',
          level1:'',
          level:'',
          partyA:'',
          projectManager:'',
          projectName:'',
          startTime:'',
          description:'',
          workTime:''
        },
        idx: -1,
        id: -1,
      };
    },

    computed: {

    },
    methods: {
      //新建项目
      addproject(){
        this.$http.post('/project/post',{
          finishTime:this.form.value6[1],
          level:this.form.level,
          partyA:this.form.partyA,
          projectManager:this.form.projectManager,
          projectName:this.form.projectName,
          startTime:this.form.value6[0],
          description:this.form.description,
          workTime:this.form.workTime,
        }).then( res => {
          if(res){
            Message.success('新建成功！');
            this.isAddProject = false;
            this.showList();
          }else {
            Message.warning('请检查负责人和甲方的姓名是否正确')
          }
        })
      },
      // 触发搜索按钮
      handleSearch() {
        this.tableDataALL=[];
        this.tableData=[];
        this.$http.get('/project/count').then( res =>{
          res.data.map(item=>{
            if (this.query.name===''){
              this.showList();
              this.pageTotal=res.data.length
            }
            else if(item.projectName.indexOf(this.query.name)!=-1){
              if(this.tableData.length !== 10 ){
                this.tableData.push(item);
              }
              this.tableDataALL.push(item);
            }
          });
          this.pageTotal=this.tableDataALL.length
        });
      },
      // 删除操作
      handleDelete(index, row) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning'
        })
          .then(() => {
            this.$http.delete('/project/remove',{
              params:{
                projectId:row.projectId
            }
            }).then( res => {
              this.$message.success('删除成功');
              this.tableData.splice(index, 1);
            })
          })
      },
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      delAllSelection() {
          const length = this.multipleSelection.length;
        for (let i = 0; i < length; i++) {
          this.projectIds1.push(this.multipleSelection[i].projectId)
        }
        console.log(this.projectIds1);
        this.$http.delete('/project/removeAll',{
          params:{
            projectIds: this.projectIds1
          },
          paramsSerializer: params => {
            return qs.stringify(params, { indices: false })
          }
        }).then( res =>{
        console.log(this.multipleSelection);
          const length = this.multipleSelection.length;
          let str = '';
          this.delList = this.delList.concat(this.multipleSelection);
          for (let i = 0; i < length; i++) {
            str += this.multipleSelection[i].projectName + '项目 ';
          }
          this.$message.error(`删除了${str}`);
          this.multipleSelection = [];
        })
      },
      // 编辑操作
      handleEdit(index, row) {
        let myDate = new Date();
        this.idx = index;
        this.form = row;
        this.projectid = row.projectId;
        this.editVisible = true;
      },
      // 保存编辑
      saveEdit() {
        let projectStatus = this.projectStatusList.find( item => {
          return item.value === this.form.projectStatus
        });
        this.editVisible = false;
        this.$message.success(`修改第 ${this.idx + 1} 行成功`);
        this.$set(this.tableData, this.idx, this.form);
        this.$http.put('/project/change',{
          finishTime:this.form.value6[1],
          level:this.form.level1,
          partyA:this.form.partyA,
          workTime:this.form.workTime,
          projectManager:this.form.projectManager,
          projectName:this.form.projectName,
          projectStatus:projectStatus.id,
          startTime:this.form.value6[0],
          projectId:this.projectid,
        }).then( res => {
          console.log(this.form.level);
          Message.success('编辑成功');
          this.showList()
        })
      },
      // 分页导航
      handlePageChange(val) {
        // val获取当前页面中的页数
        this.offset=val;
        if(this.query.name===''){
          this.showList();
        }else {
          this.tableData=[];
          //前端假分页
          this.tableDataALL.map((item,index) => {
            if(this.tableData.length !== 10 && index >= (val-1)*10 && index <= val*10-1 ){
              this.tableData.push(item);
            }
          });

        }
      },
      //跳转详情页
      gotoProjectOne(val){
        console.log(val);
        this.$router.push({
          path:'projectone/overview',
          query:{
            projectId:val.projectId
          },
          params:{
            projectData:val
          }
        })
      },
      //展示所有项目
      showList(){
        this.$http.get('/project/count',).then( res =>{
          this.pageTotal=res.data.length
        });
        this.$http.get('/project/show/list',{
          params:{
            offset:this.offset
          }
        }).then( res => {
            this.tableData=res.data;
          });
      }
    },
    mounted(){
      //所有项目
      this.showList()
    }
  };
</script>

<style scoped  lang="less">
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .el-rate__item{
        margin-right: 28px!important;
    }

    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

</style>
